<template>
  <h1>表单组件</h1>
  <el-button @click="handleAdd">表单组件</el-button>
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <BaseForm
      :model="formData"
      :schema="formSchema"
      :rules="formRules"
      :columns="2"
      :gutter="16"
      @submit="handleSubmit"
      @reset="handleReset"
    />
  </el-dialog>
</template>

<script setup>
import BaseForm from "@/components/BaseForm/BaseForm.vue";
import { onMounted, reactive, ref } from "vue";
// 表单项配置（核心：描述每个表单项的类型、标签、选项等）
const dialogVisible = ref(false);
const dialogTitle = ref("表单组件");
const formData = reactive({
  permissionName: "", // 权限名称
  permissionCode: "", // 权限标识
  permissionDesc: "", // 权限描述
  parentPermission: "", // 父级权限
  isMenu: true, // 是否菜单
  routePath: "", // 路由路径
  icon: "", // 图标
});
const formSchema = [
  {
    prop: "permissionName",
    label: "权限名称",
    type: "input",
    required: true,
    placeholder: "请输入权限名称",
    span: 8,
  },
  {
    prop: "permissionCode",
    label: "权限标识",
    type: "input",
    required: true,
    placeholder: "请输入权限标识",
    span: 8,
  },
  {
    prop: "icon",
    label: "图标",
    type: "input",
    placeholder: "请输入图标类名",
    span: 8,
  },
  {
    prop: "parentPermission",
    label: "父级权限",
    type: "select",
    placeholder: "请选择父级权限",
    span: 8,
    options: [
      { label: "顶级权限", value: "0" },
      { label: "用户管理", value: "user:manage" },
      { label: "角色管理", value: "role:manage" },
    ],
  },
  {
    prop: "isMenu",
    label: "是否菜单",
    type: "switch",
    span: 4,
  },
  {
    prop: "routePath",
    label: "路由路径",
    type: "input",
    required: true,
    placeholder: "请输入路由路径",
    span: 12,
  },
  {
    prop: "startTime",
    label: "开始时间",
    type: "date-picker",
    placeholder: "请输入开始时间",
    span: 12,
  },
  {
    prop: "endTime",
    label: "结束时间",
    type: "date-picker",
    placeholder: "请输入结束时间",
    span: 12,
  },
  {
    prop: "permissionDesc",
    label: "权限描述",
    type: "textarea",
    placeholder: "请输入权限描述",
  },
];
const handleAdd = () => {
  dialogVisible.value = true;
};
// 表单自定义校验规则
const formRules = {
  // 可在这里写更细粒度的自定义规则（如正则、异步验证等）
  // 示例：routePath: [{ pattern: /^\/\w+$/, message: '路由路径需以斜杠开头', trigger: 'blur' }]
};

// 表单提交逻辑
const handleSubmit = (formData) => {
  dialogVisible.value = false;
  console.log("提交的表单数据：", formData);
  // 这里可调用接口提交数据
};

// 表单重置逻辑
const handleReset = () => {
  dialogVisible.value = false;
  console.log("表单已重置");
  // 可做额外重置操作（如重置到初始默认值）
};
</script>

<style scoped lang="less">
</style>
